import { addFile } from '@/services/files'
import { PlusOutlined } from '@ant-design/icons'
import {
  ModalForm,
  ProForm,
  ProFormDatePicker,
  ProFormDateRangePicker,
  ProFormGroup,
  ProFormSelect,
  ProFormText,
  ProFormUploadDragger,
} from '@ant-design/pro-components'
import { Button, Form, message, UploadProps, Upload } from 'antd'
import { useEffect, useState } from 'react'
import request from 'umi-request'
import UploadComponents from './uploadComponents'
import { allLabel } from '@/services/labels'
const { Dragger } = Upload
const onFinish = async (values: any) => {
  const result = await addFile(values)
  console.log(result)
}

const props: UploadProps = {
  name: 'file',
  multiple: true,
  // action: 'http://hp7ace.natappfree.cc/file/temUpload',
  // onChange(info) {
  //   const { status } = info.file
  //   if (status !== 'uploading') {
  //     console.log(info.file, info.fileList)
  //   }
  //   if (status === 'done') {
  //     message.success(`${info.file.name} file uploaded successfully.`)
  //   } else if (status === 'error') {
  //     message.error(`${info.file.name} file upload failed.`)
  //   }
  // },
  customRequest: (options) => {
    const { file } = options
    const formData = new FormData()
    formData.append('file', file) // 将文件添加到 FormData 对象中

    fetch('http://q9v67p.natappfree.cc/file/temUpload', {
      method: 'POST',
      body: formData,
    })
      .then((response) => response.json())
      .then((data) => {
        console.log(data)
      })
      .catch((error) => {
        console.error(error)
      })
  },
  onDrop(e) {
    console.log('Dropped files', e.dataTransfer.files)
  },
}

//传buttonText、title、
export default function UploadForm(props: any) {
  const [form] = Form.useForm<{ name: string; company: string }>()
  const [ids, setIds] = useState([])
  const [labelList, setLabelList] = useState([])
  const getLabelList = async () => {
    const result = await allLabel({ pageSize: 100, current: 1 })
    if (result.code === 200) {
      console.log(result?.data?.records)
      setLabelList(
        result?.data?.records?.map((item) => {
          return { label: item.name, value: item.id }
        })
      )
    }
  }
  useEffect(() => {
    getLabelList()
  }, [])
  return (
    <ModalForm<{
      name: string
      company: string
    }>
      title="上传图片"
      width="30vw"
      trigger={
        <Button type="primary">
          <PlusOutlined />
          上传文件
        </Button>
      }
      form={form}
      autoFocusFirstInput
      modalProps={{
        destroyOnClose: true,
        onCancel: () => console.log('run'),
      }}
      submitTimeout={500}
      onFinish={async (values) => {
        console.log(ids)

        const res = await addFile({
          ...values,
          parentId: props?.parentId,
          files: ids,
        })
        props?.actionRef.current.reload()
        // message.success('上传成功！')
        return true
      }}>
      {/* request从服务器获取标签列表 */}
      <ProFormSelect
        width="xl"
        name="labels"
        label="标签"
        options={labelList}
        fieldProps={{
          mode: 'multiple',
          allowClear: true,
          style: {
            marginLeft: '0',
          },
        }}
        extra={'最少选择一个'}
      />
      <ProFormDatePicker label="拍摄时间" name="createTime" width="xl" />
      {/* <ProFormUploadDragger label="图片" name="files" max={9} {...props} /> */}
      <UploadComponents getFileIds={setIds} />
    </ModalForm>
  )
}
